<template>

    <div style="margin-top: 120px;text-align: center;"> rebuild </div>


    <div id="demo-wrap" class="stack-img">
        <h2> Render Stack of Images</h2>
        <div id="element1" class="cornerstone-item"></div>
    </div>
    <div id="demo-wrap">
        <h2>Render Volume</h2>
        <div ref="v1" class="cornerstone-item"></div>
        <div ref="v2" class="cornerstone-item"></div>
        <div ref="v3" class="cornerstone-item"></div>
        <p style="text-align: center;">在体绘制(Volume
            Rendering)技术中,它指的是一个包含三维体数据(如CT扫描或MRI数据)的虚拟空间。这些数据可以使用特定的算法和技术进行渲染,以生成逼真的可视化图像</p>
    </div>
    <input type="file" @change="uploadFile($event)" />
</template>

<script>

import {
    volumeLoader,
    RenderingEngine,
    Enums,
    setVolumesForViewports,
} from "@cornerstonejs/core";

import { initCornerstone, getTestImageId } from "../cornerstone/index";
import {
    Enums as csToolsEnums, ToolGroupManager, addTool, PanTool, ZoomTool,
    StackScrollMouseWheelTool, WindowLevelTool, LengthTool, BidirectionalTool,
} from '@cornerstonejs/tools';
import { cornerstoneDICOMImageLoader } from "@cornerstonejs/dicom-image-loader";

export default {
    name: "rebuild",

    data() {
        return {
            vId: "id",
            rId: "renderingEngine",
            volumeId: "my_volume_id",
            renderingEngineId: "my_renderingEngine",
        };
    },

    mounted() {
        this.init();
        this.initV();
    },

    methods: {

        async uploadFile(e) {
            await initCornerstone();
            // const imageIds = [e.target.files[0]];
            const imageIds = ["wadouri:https://9z04x8ykjr.codesandbox.io/000000.dcm"];
            console.log("imageIds", imageIds)
            const renderingEngine = new RenderingEngine(this.rId);

            // 在渲染引擎中创建并加载视图，使视图与HTML元素绑定
            const viewportId = "CT_AXIAL_STACK";
            const viewportInput = {
                viewportId: viewportId,
                element: document.querySelector("#element1"),
                type: Enums.ViewportType.STACK,
            };
            renderingEngine.enableElement(viewportInput);

            const viewport = renderingEngine.getViewport(viewportId);
            viewport.setStack(imageIds, 60);
            viewport.render();

            // const id = cornerstoneDICOMImageLoader.wadouri.fileManager.add((e.target.files[0]))
            // console.log(id)
        },

        async init() {
            await initCornerstone();
            const imageIds = await getTestImageId();
            // const imageIds = ['wadors:https://d3t6nz73ql33tx.cloudfront.net/dicomweb/studies/1.3.6.1.4.1.14519.5.2.1.7009.2403.334240657131972136850343327463/series/1.3.6.1.4.1.14519.5.2.1.7009.2403.226151125820845824875394858561/instances/1.3.6.1.4.1.14519.5.2.1.7009.2403.811199116755887922789178901449/frames/1', 'wadors:https://d3t6nz73ql33tx.cloudfront.net/dicomweb/studies/1.3.6.1.4.1.14519.5.2.1.7009.2403.334240657131972136850343327463/series/1.3.6.1.4.1.14519.5.2.1.7009.2403.226151125820845824875394858561/instances/1.3.6.1.4.1.14519.5.2.1.7009.2403.811199116755887922789178901449/frames/1']
            console.log("imageIds", imageIds[0])
            // const imageIds = 'https://raw.githubusercontent.com/cornerstonejs/cornerstoneWebImageLoader/master/examples/Renal_Cell_Carcinoma.jpg'
            // 准备一个渲染引擎 => renderingEngine
            const renderingEngine = new RenderingEngine(this.rId);

            // 在渲染引擎中创建并加载视图，使视图与HTML元素绑定
            const viewportId = "CT_AXIAL_STACK";
            const viewportInput = {
                viewportId: viewportId,
                element: document.querySelector("#element1"),
                type: Enums.ViewportType.STACK,
            };
            renderingEngine.enableElement(viewportInput);

            const viewport = renderingEngine.getViewport(viewportId);
            viewport.setStack(imageIds, 60);
            viewport.render();

            // 添加工具
            if (!ToolGroupManager.getToolGroup('ctToolGroup')) {
                addTool(PanTool);
                addTool(ZoomTool);
                addTool(StackScrollMouseWheelTool);
                addTool(WindowLevelTool);
                addTool(BidirectionalTool);
                addTool(LengthTool);
            }

            // 创建工具组
            const toolGroupId = 'ctToolGroup';
            const ctToolGroup = ToolGroupManager.createToolGroup(toolGroupId);

            // console.log("PanTool", PanTool.toolName)

            // 工具加入工具组
            ctToolGroup.addTool(PanTool.toolName);
            ctToolGroup.addTool(ZoomTool.toolName);
            ctToolGroup.addTool(StackScrollMouseWheelTool.toolName);
            ctToolGroup.addTool(WindowLevelTool.toolName);
            ctToolGroup.addTool(BidirectionalTool.toolName);
            ctToolGroup.addTool(LengthTool.toolName);
            // const PanTool = ToolGroupManager.getTool('PanTool');
            // const ZoomTool = cornerstoneTools.ZoomTool;


            // ctToolGroup.addTool(ProbeTool.toolName);

            // 将工具组添加到视图
            ctToolGroup.addViewport(viewportId, this.rId);

            // 设置工具激活状态
            // ctToolGroup.setToolActive(PanTool.toolName, {
            //     bindings: [{ mouseButton: MouseBindings.Auxiliary }],
            // });
            // ctToolGroup.setToolActive(WindowLevelTool.toolName, {
            //     bindings: [
            //         {
            //             mouseButton: csToolsEnums.MouseBindings.Primary, // Left Click
            //         },
            //     ],
            // });
            // Set the
            ctToolGroup.setToolActive(LengthTool.toolName, {
                bindings: [
                    {
                        mouseButton: csToolsEnums.MouseBindings.Primary, // Left Click
                    },
                ],
            });
            ctToolGroup.setToolActive(ZoomTool.toolName, {
                bindings: [
                    {
                        mouseButton: csToolsEnums.MouseBindings.Secondary, // Right Click
                    },
                ],
            });
            ctToolGroup.setToolActive(StackScrollMouseWheelTool.toolName);



        },

        async initV() {
            await initCornerstone();

            const imageIds = await getTestImageId();

            // 准备一个渲染引擎 => renderingEngine
            const renderingEngine = new RenderingEngine(this.renderingEngineId);

            // 去创建并缓存一个Volume
            const volume = await volumeLoader.createAndCacheVolume(this.volumeId, {
                imageIds,
            });

            // 在渲染引擎中创建并加载视图，使视图与HTML元素绑定
            const viewportId1 = "CT_AXIAL";
            const viewportId2 = "CT_SAGITTAL";
            const viewportId3 = "CT_CORONAL";
            const viewportInputArray = [
                {
                    viewportId: viewportId1,
                    type: Enums.ViewportType.ORTHOGRAPHIC,
                    element: this.$refs.v1,
                    defaultOptions: {
                        orientation: Enums.OrientationAxis.AXIAL,
                    },
                },
                {
                    viewportId: viewportId2,
                    type: Enums.ViewportType.ORTHOGRAPHIC,
                    element: this.$refs.v2,
                    defaultOptions: {
                        orientation: Enums.OrientationAxis.SAGITTAL,
                    },
                },
                {
                    viewportId: viewportId3,
                    type: Enums.ViewportType.ORTHOGRAPHIC,
                    element: this.$refs.v3,
                    defaultOptions: {
                        orientation: Enums.OrientationAxis.CORONAL,
                    },
                },
            ];

            renderingEngine.setViewports(viewportInputArray);

            // 加载Volume => 注意：创建是创建，加载是加载，加载时才会去请求Dicom文件
            volume.load();

            // 在视图上设置Volume
            await setVolumesForViewports(
                renderingEngine,
                [
                    {
                        volumeId: this.volumeId,
                    },
                ],
                [viewportId1, viewportId2, viewportId3]
            );

            // 渲染图像
            renderingEngine.renderViewports([viewportId1, viewportId2, viewportId3]);
        },
    },
};
</script>

<style>
.stack-img {
    margin: 0 auto;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center
}

.cornerstone-item {
    display: inline-block;
    width: 300px;
    height: 300px;
}
</style>
